<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>政法教育整顿管理平台</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./css/login.css" />
    <script src="./js/myUtils.js"></script>
</head>

<body class="body_bj">
    <div id="particles-js"> </div>
    <form class="layui-form" action="">
        <div class="login">
            <div class="logo">
                <img src="./zfw-logo.png" alt="">
            </div>
            <ul class="login-list">
                <li>
                    <input type="text" name="username" lay-verify="required" lay-reqtext="姓名是必填项，不能为空"
                        placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </li>
                <li>
                    <input type="password" name="password" lay-verify="required" lay-reqtext="密码是必填项，不能为空"
                        placeholder="请输入密码" autocomplete="off" class="layui-input">
                </li>
                <li>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn btn" lay-submit lay-filter="login">登录</button>
                    </div>
                </li>
            </ul>
        </div>
    </form>

    <script src="./component/layui/layui.js"></script>
    <script src="./component/pear/pear.js"></script>
    <script src="./js/base64.min.js"></script>
    <script type="text/javascript" src="./js/particles.min.js"></script>
    <script type="text/javascript">
        particlesJS('particles-js', //实现粒子特效
            {
                "particles": {
                    "number": {
                        "value": 40, //数量
                        "density": {
                            "enable": true,
                            "value_area": 800
                        }
                    },
                    "color": {
                        "value": "#ffffff"
                    },
                    "shape": {
                        "type": "circle",
                        "stroke": {
                            "width": 0,
                            "color": "#000000"
                        },
                        "polygon": {
                            "nb_sides": 5
                        },
                        "image": {
                            /*"src": "img/github.svg",*/
                            "width": 100,
                            "height": 100
                        }
                    },
                    "opacity": {
                        "value": 0.3,
                        "random": false,
                        "anim": {
                            "enable": false,
                            "speed": 1,
                            "opacity_min": 0.1,
                            "sync": false
                        }
                    },
                    "size": {
                        "value": 3,
                        "random": true,
                        "anim": {
                            "enable": false,
                            "speed": 40,
                            "size_min": 0.1,
                            "sync": false
                        }
                    },
                    "line_linked": {
                        "enable": true,
                        "distance": 150,
                        "color": "#ffffff",
                        "opacity": 0.4,
                        "width": 1
                    },
                    "move": {
                        "enable": true,
                        "speed": 1,
                        "direction": "none",
                        "random": false,
                        "straight": false,
                        "out_mode": "out",
                        "bounce": false,
                        "attract": {
                            "enable": false,
                            "rotateX": 600,
                            "rotateY": 1200
                        }
                    }
                },
                "interactivity": {
                    "detect_on": "canvas",
                    "events": {
                        "onhover": {
                            "enable": true,
                            "mode": "grab"
                        },
                        "onclick": {
                            "enable": false,
                            "mode": "push"
                        },
                        "resize": true
                    },
                    "modes": {
                        "grab": {
                            "distance": 150,
                            "line_linked": {
                                "opacity": 1
                            }
                        },
                        "bubble": {
                            "distance": 400,
                            "size": 40,
                            "duration": 2,
                            "opacity": 8,
                            "speed": 3
                        },
                        "repulse": {
                            "distance": 200,
                            "duration": 0.4
                        },
                        "push": {
                            "particles_nb": 4
                        },
                        "remove": {
                            "particles_nb": 2
                        }
                    }
                },
                "retina_detect": false
            }
        );
    </script>

    <script>
        // 获取谷歌浏览器版本
        function getChromeVersion() {
            var arr = navigator.userAgent.split(' ');
            var chromeVersion = '';
            for (var i = 0; i < arr.length; i++) {
                if (/chrome/i.test(arr[i]))
                    chromeVersion = arr[i]
            }
            if (chromeVersion) {
                return Number(chromeVersion.split('/')[1].split('.')[0]);
            } else {
                return false;
            }
        }

        layui.data('options', { key: 'data', remove: true });
        layui.data('userInfo', { key: 'item', remove: true });
        layui.data('consoleSelect', { key: 'item', remove: true });

        var flag = false
        var locationParams = myUtils.GetRequest()
        if (locationParams.username != undefined) {
            flag = true // 自动尝试请求登录
        }

        layui.use(['form', 'Api', 'yadmin'], function () {
            var $ = layui.$,
                Api = layui.Api,
                form = layui.form,
                yadmin = layui.yadmin

            if (getChromeVersion()) {
                var version = getChromeVersion();
                console.log("version: ", version)
                if (version < 90) {
                    downloadChrome()
                }
            } else {
                downloadChrome()
            }

            function downloadChrome() {
                layer.open({
                    type: 1
                    , title: false //不显示标题栏
                    , closeBtn: false
                    , area: '300px;'
                    , shade: 0.8
                    , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                    , resize: false
                    , btn: ['确定', '取消']
                    , btnAlign: 'c'
                    , moveType: 1 //拖拽模式，0或者1
                    , content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">您使用的浏览器版本过旧!<br>继续使用可能会引发错误！<br>请将浏览器升级到最新版本！</div>'
                    , success: function (layero) {
                        var btn = layero.find('.layui-layer-btn');
                        btn.find('.layui-layer-btn0').attr({
                            href: Api.baseUrl + 'files/mini_installer.exe'
                            , target: '_blank'
                        });
                    }
                });
            }

            var success = function (res) {
                // console.log("Login res: ", res)
                if (res.errno == 0) {
                    var data = res.data
                    // console.log("data: ", data)
                    // 设置全局存储
                    layui.data('userInfo', { key: 'item', value: data });
                    layui.data('consoleSelect', { key: 'item', value: 0 });
                    localStorage.setItem('token', data.token);
                    layer.msg('登录成功', { icon: 1 })
                    setTimeout(() => {
                        self.location = './main.html'
                    }, 2000);
                } else if (res.errno == 11) {
                    setTimeout(function () {
                        layer.msg('密码已过期，请修改密码', { icon: 2 })
                    }, 1500)
                    yadmin.editPwd()
                } else {
                    layer.alert(res.errmsg, { icon: 2 });
                }
            }
            if (flag) {
                autoLogin()
            }

            //监听提交
            form.on('submit(login)', function (data) {
                var params = data.field
                $.ajax({
                    url: Api.login,
                    type: "post",
                    dataType: 'json',
                    data: {
                        'username': params.username,
                        'password': Base64.encode(params.password),
                    },
                    xhrFields: { withCredentials: true },
                    success: success,
                    complete: function (res) {

                    }
                })
            });

            function autoLogin() {
                console.log("locationParams: ", locationParams)
                $.ajax({
                    url: Api.login,
                    type: "post",
                    dataType: 'json',
                    data: {
                        'username': locationParams.username,
                        'password': locationParams.password,
                    },
                    xhrFields: { withCredentials: true },
                    success: success,
                    complete: function (res) {

                    }
                })
            }
        });

    </script>

</body>

</html>